<!doctype html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
</head>
<!-- https://www.cnblogs.com/liuhao-web/p/13184486.html -->

<!--
    1 window.onerror一般用于捕捉 脚本语法错误 和 运行时错误，
    2 可以获得出错的文件信息，如出错信息、出错文件、行号等，
    3 不同域名的脚本需要设置跨域 crossorigin ，否者只有一个Script error提示，如果不设置执行脚本里的方法时加try catch
    4 window.onerror 函数只有在返回 true 的时候，异常才不会向上抛出（浏览器接收后报红），
    5 window.onerror 最好写在所有JS脚本的前面，否则有可能捕获不到错误
    6 window.onerror 无法捕获语法错误，接口错误，promise内部错误
-->

<body>
	<script>
		/**
		 * @param {String}  message    错误信息
		 * @param {String}  source    出错的文件路径
		 * @param {Number}  lineno    出错的行数
		 * @param {Number}  colno    列号
		 * @param {Object}  error  Error对象
		 */
		window.onerror = function (message, source, lineno, colno, error) {
			// 可以捕获异步函数中的错误信息并进行处理，提示Script error.
			console.log('window.onerror', error);
			return true; // 不会抛红色错误到控制台
		};
		// TODO:  1. 可以捕获 同步运行时错误 ✅
		// UndefVar // 此处未声明

		// TODO:  2. 可以捕获 异步运行时错误(setTimeout\setInterval ) ✅
		// setTimeout(function () {
		//     console.log(obj);
		// });

		// TODO:  3. 不能捕获到 语法错误 ❌
		// let name = 'Jack; // 少个单引号 输出： Uncaught SyntaxError: Invalid or unexpected token ，报错了，但是不能被onerror捕获

		// TODO:  4. 不能捕获到 promise 内的错 ❌
		// new Promise((resolve, reject) => {
		//     console.log(obj); // promise 内的错误只能通过 promise 的错误捕获方法获取（ 可以通过  Promise.catch，或 window.addEventListener("unhandledrejection")
		//     resolve();
		// })

		// TODO:  5. 不能捕获到 网络请求的异常 ❌
		// const img = document.createElement('img')
		// img.src = './xxx.png' // 不论是静态资源异常，或者接口异常，错误都无法捕获到。(可以通过 window.addEventListener("error" 捕获)
		// document.body.appendChild(img)

		// TODO 主动抛错 ✅
		// throw '12'
	</script>
</body>

</html>